<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>项目反馈</title>
        <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <script src="../resource/touch.js"></script>
	<jsp:include page="../../../main/mp/inc.jsp"	/>
    <style>
         .toolAndroid {
               position:fixed !important;
               bottom: -11px !important;
               left:0px !important;
               width:100% !important;
               background-color:gainsboro;
           }
           .btn-txt[class='ui-btn-icon-left']{
               padding-left: 1.6em !important;
           }

           .toolIos{
              position:absolute !important;
              bottom: -11px !important;
              left:0px !important;
              width:99% !important;
              background-color:gainsboro;
           }
    </style>
	<script>

		$(function(){

			$("[data-role='navbar']").navbar();
			//$("[data-role='header'], [data-role='footer']").toolbar();

            var urls = "";
            $(".imgslist[ref='show']").each(function(){
                urls += $(this).attr("src") + ",";
            });
            urls = urls.substring(0,urls.length-1);
            $("#divUrls").text(urls);
            $("#imageTotal").text(urls.split(",").length);

		});

	</script>
</head>
<body>
	<!-- class="jqm-demos" -->
    <input type="hidden" id="hi_ids" value=""/>
	<div data-role="page" id="page-main" data-theme="a">
	    <div data-role="header" data-position="fixed" data-theme="a">
            <h1 style="float:left;margin: 0 10px;color: #121010;"><i class="fa fa-user"></i> 项目反馈</h1>
            <div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-right">
                    <c:if test="isCreater(proBack.id)!=''">
                        <a id="proback_edit" data-ajax="false"
                           class="ui-btn ui-shadow ui-btn-inline ui-icon-edit ui-btn-a ui-corner-all ui-btn-icon-left">编辑</a>
                    </c:if>
                    <a href="#" id="page-comment-action" class="ui-btn ui-shadow ui-btn-inline ui-icon-check ui-btn-a ui-corner-all ui-btn-icon-left">批注</a>
                </div>
	    </div><!-- /header -->
	    <div class="ui-content jqm-content jqm-fullwidth" role="main">	
	    	<form id="form-common" method="post" id="form-common" data-ajax="false">
                <input type="hidden" name="keyId" id="keyId" value="${proBack.id}"/>
                <%--<div>appId: '<s:property value="jsapiSignature.appId" />'</div>--%>
                <%--<div>timestamp: '<s:property value="jsapiSignature.timestamp" />'</div>--%>
                <%--<div>nonceStr: '<s:property value="jsapiSignature.noncestr" />'</div>--%>
                <%--<div>signature: '<s:property value="jsapiSignature.signature" /></div>--%>
				<div class="ui-field-contain">
				    <label>项目名称：</label>
				    <span>${proBack.proInfo.name}</span>

				</div>
				<div class="ui-field-contain">
				    <label>反馈类别：</label>
				    <span>
                        ${proBack.category.name}
                    </span>
				</div>
				<div class="ui-field-contain">
				    <label>反馈日期：</label>
				    <span><fmt:parseDate value="${proBack.backDate}" pattern="yyyy-MM-dd" /> </span>
				</div>
				<div class="ui-field-contain">
				    <label>反馈内容：</label>
				     <span>${proBack.content}</span>
				</div>
				<div class="ui-field-contain">
                	 <label>反馈地址：</label>
                     <span>${address}</span>
                </div>
				<div class="ui-field-contain">
				    <label>备注：</label>
				    <span >${proBack.mark}</span>
				</div>
				<div class="ui-field-contain">
                    <label>是否正常：</label>
                    <span >
                        <c:choose>
                            <c:when test="${proBack.regular}==1">
                                是
                            </c:when>
                            <c:otherwise>
                                否
                            </c:otherwise>
                        </c:choose>
				</div>
				<div class="ui-field-contain">
				    <label>通知人员：</label>
                    <span></span>
				</div>
                <div class="ui-field-contain">
                    <label>反馈人：</label>
                    <span></span>
                </div>
			</form>

            <div class="ui-field-contain">
                <label>照片列表：</label>
                <%--<span>--%>
                    <%--<button class="btn" id="previewImage_btn" style="display:inline">预览照片</button>--%>
                <%--</span>--%>
            </div>
            <c:forEach var="url" items="${imgUrl}" >
                <div style="margin-bottom: 5px"><img class="imgslist" ref="show" width="300" src="${url}" data-index="" />"></div>
            </c:forEach>
            <div id="divUrls" style="display:none"></div>
		</div><!-- /content -->
        <div data-role="footer" data-position="fixed" data-theme="a">
            <div data-role="navbar" data-iconpos="top" >
                <div data-role="footer" data-position="fixed" data-theme="a">
                    <div data-role="navbar" data-iconpos="top" >
                        <ul>
                            <li><a id="page-resume-action" class="ui-btn ui-btn-icon-left ui-icon-bullets" data-ajax="false">反馈履历</a></li>
                        </ul>
                    </div><!-- /navbar -->
                </div><!-- /footer -->
            </div><!-- /navbar -->
        </div><!-- /footer -->
	</div><!-- /page -->

    <!-- 页面批注-->
    <div data-role="page" id="page-comment" data-theme="a"
         targetId="${proBack.id}"
         targetObject="com.joint.core.entity.ProBack"
         data="{}" createrId="${proBack.creater.id}">
        <div data-role="header"  >
            <a href="#" key="page-main-action" data-ajax="false" id=""
               class="ui-btn ui-btn-left ui-icon-back ui-corner-all ui-btn-icon-left ui-btn-icon-notext">视图</a>
            <h1>批注信息</h1>
            <%--<a href="#" key="comment-popup2" data-rel="popup" parentId=''--%>
               <%--createrName='<s:property value="proBack.creater.name"/> 请填写批注信息'--%>
               <%--createrId='<s:property value="proBack.creater.id"/>' data-transition="pop"--%>
               <%--class="ui-btn ui-btn-right ui-icon-comment ui-corner-all ui-btn-icon-left ui-btn-icon-notext"--%>
               <%--data-position-to="window" data-icon="comment" data-prefetch="true">发表批注</a>--%>
        </div><!-- /header -->
        <div role="main" class="ui-content" id="comment-listview-content"
             mp-url="ajax-comment!listDocument.action">
            <ul data-role="listview" data-theme="a" data-dividertheme="b"
                mp-page="1" mp-keyword="" data-split-icon="forward" data-split-theme="a" data-inset="false">
                <li><a data-ajax="false"  href="javascript:void(0)">
                    没有批注信息.
                </a>
                </li>
            </ul>
            <%--<hr/>--%>
            <%--<div>--%>
                <%--<a href="#" key="prePage" class="ui-btn ui-btn-icon-notext ui-corner-all  ui-mini ui-btn-inline ui-icon-carat-l "> 上一页</a>--%>
                <%--<a href="#" key="nextPage" class="ui-btn ui-btn-icon-notext ui-corner-all  ui-mini ui-btn-inline ui-icon-carat-r ">下一页 </a>--%>
                    <%--<span class="ui-btn-inline">--%>
                        <%--页数  <span key="pageNumber"></span>/<span key="pageCount"></span> 共<span key="totalCount"></span>条--%>
                    <%--</span>--%>

            <%--</div>--%>
            <div style="height: 40px;">

            </div>
            <div id="ToolBar">
                <table style="width:100%">
                    <tr>
                        <td>
                            <img id="btn_choose" src="../resource/com/img/add-18.png" style="float: right;"/>
                            <%--<a href="#" data-role="button" id="btn_choose" data-icon="plus" style="display: block;height: 12px;margin-top: 7px;margin-left: -2px;margin-right:-4px;padding-left:1.6em;border-radius:0px;"></a>--%>
                        </td>
                        <td>
                            <input type="text" placeholder="请输入内容"  id="chart_user"  name="chart_user" />
                        </td>
                        <td>
                            <img id="chart_btn" src="../resource/com/img/yes-19.png"  style="float: left"/>
                            <%--<a href="#" data-role="button" id="chart_btn" data-icon="check" style="display: block;margin-top: 7px;height: 12px;margin-left: -4px;margin-right: -4px;padding-left:1.6em;border-radius:0px;"></a>--%>
                        </td>
                    </tr>
                </table>
            </div>
            <%--<div data-role="popup" id="comment-popup2" data-theme="a" class="ui-corner-all" data-history="false" data-corners="false">--%>
                <%--<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-left">Close</a>--%>
                <%--<form>--%>
                    <%--<div style="padding:0 8px;">--%>
                        <%--<textarea cols="40" rows="8" name="comment" placeholder="请填写您的批注信息"></textarea>--%>
                        <%--<button type="button" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">提交批注</button>--%>
                        <%--         </div>--%>
                <%--</form>--%>
            <%--</div>--%>
        </div><!-- /content -->
    </div><!-- /page comment -->
    <div data-role="page" id="page-resume" data-theme="a"
         targetId="<s:property value="proBack.id" />">
        <div data-role="header"  >
            <a href="#" key="page-main-action" data-ajax="false" id="ajax_resume_list"
               class="ui-btn ui-btn-left ui-icon-back ui-corner-all ui-btn-icon-left ui-btn-icon-notext">视图</a>
            <h1>履历一览</h1>

        </div><!-- /header -->
        <div role="main" class="ui-content" id="comment-listview-resume"
             mp-url="ajax-resume!list.action?keyId=">
            <ul data-role="listview" data-theme="a" data-dividertheme="b"
                mp-page="1" mp-keyword="" data-split-icon="forward" data-split-theme="a" data-inset="false">
                <li><a data-ajax="false"  href="javascript:void(0)">
                    没有履历信息.
                </a>
                </li>
            </ul>

        </div><!-- /content -->
    </div>
    <!-- 页面预览图片-->
    <div data-role="page" id="page-previewImage" data-theme="b">
        <div data-role="header" data-position="fixed" id="previewImageHeader">
            <a href="#" key="page-main-action" data-ajax="false"
               class="ui-btn ui-btn-left ui-icon-back ui-corner-all ui-btn-icon-left ui-btn-icon-notext">返回</a>
            <h1>照片预览</h1>
        </div><!-- /header -->
        <div role="main" class="ui-content jqm-content jqm-fullwidth" id="imageContainer" >
            <img class="imgslist" width="300" src="" id="img_show_big">
        </div><!-- /content -->
        <div data-role="footer" id="previewImageFooter" data-theme="b" data-position="fixed">
            <div data-role="navbar" style="width: 100%">
                <ul>
                    <li><a href="#" id="prevImage" data-icon="arrow-l">上一张</a></li>
                    <li><a href="#" id="showImageInfo" data-icon="info">第<span id="imageIndex"></span>张 / 共<span id="imageTotal"></span>张</a></li>
                    <li><a href="#" id="nextImage" data-icon="arrow-r">下一张</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div data-role="page" id="page-user" data-theme="a">
        <div data-role="header" data-position="fixed">
            <a href="#page-comment" key="page-comment-action" data-ajax="false"  class="ui-btn ui-btn-left ui-icon-back ui-corner-all ui-btn-icon-left ui-btn-icon-notext">视图</a>
            <h1>请选择要回复的人</h1>
            <a id="comuser_btn" mp-panel-id="proinfo-listview-panel" href="#" class="ui-btn ui-shadow ui-mini ui-btn-right">确认</a>
        </div>
        <div role="main" class="ui-content" id="comment-user-content"
             mp-url="ajax-comment!usersPage.action">
            <ul data-role="listview" data-theme="a" data-dividertheme="b"
                mp-page="1" mp-keyword="" data-split-icon="forward" data-split-theme="a" data-inset="false">
                <li>
                </li>
            </ul>
            <%--<div>--%>
            <%--<a href="#" key="prePage" class="ui-btn ui-btn-icon-notext ui-corner-all  ui-mini ui-btn-inline ui-icon-carat-l "> 上一页</a>--%>
            <%--<a href="#" key="nextPage" class="ui-btn ui-btn-icon-notext ui-corner-all  ui-mini ui-btn-inline ui-icon-carat-r ">下一页 </a>--%>
            <%--<span class="ui-btn-inline">--%>
            <%--页数  <span key="pageNumber"></span>/<span key="pageCount"></span> 共<span key="totalCount"></span>条--%>
            <%--</span>--%>
            <%--</div>--%>

        </div>
    </div>


    <script>
        $(function(){
            var dx=0, dy=0;
            var initialScale = 1;
            var currentScale = 1;

            var target = $("#img_show_big");
            //target.style.webkitTransition = "all ease 0.05s";
            touch.on('#img_show_big', 'touchstart', function(ev){
                ev.preventDefault();
            });
            touch.on('#img_show_big', 'pinchend', function(ev){
                currentScale = ev.scale - 1;
                currentScale = initialScale + currentScale;
                currentScale = currentScale > 4 ? 4 : currentScale;
                currentScale = currentScale < 0.5 ? 0.5 : currentScale;
                this.style.webkitTransform = 'scale(' + currentScale + ')';
            });
            touch.on('#img_show_big', 'pinchend', function(ev){
                initialScale = currentScale;
            });


//            touch.on('#img_show_big', 'touchstart', function(ev){
//                ev.preventDefault();
//            });
            touch.on('#img_show_big', 'drag', function(ev){
                dx = dx || 0;
                dy = dy || 0;
                var offx = dx + ev.x + "px";
                var offy = dy + ev.y + "px";
                this.style.webkitTransform = 'translate3d(' + offx + ',' + offy + ',0)' + 'scale(' + currentScale + ')'
            });
            touch.on('#img_show_big', 'dragend', function(ev){
                dx += ev.x;
                dy += ev.y;
            });

          $('#imageContainer').height($('#page-previewImage').height()-100);

        });


        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '${jsapiSignature.appId}', // 必填，公众号的唯一标识
            timestamp: '${jsapiSignature.timestamp}', // 必填，生成签名的时间戳
            nonceStr: '${jsapiSignature.noncestr}', // 必填，生成签名的随机串
            signature: '${jsapiSignature.noncestr}',// 必填，签名，见附录1
            jsApiList: ['checkJsApi', 'getLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });

        wx.ready(function() {
            var u = navigator.userAgent, app = navigator.appVersion;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
//            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
//            alert('是否是Android：'+isAndroid);
//            alert('是否是iOS：'+isiOS);

            $("#prevImage").on("click",function(){

                var imageIndex = parseInt($("#imageIndex").text())-1;
                if(imageIndex<1){
                    alert("已经是第一张了！");
                    return;
                }
                var img = $("img[data-index="+imageIndex+"]").first();
                //$("#imageContainer").html($(img).clone());
                $("#img_show_big").attr("src",$(img).attr("src"));
                $("#imageIndex").text(""+imageIndex);
            });

            $("#nextImage").on("click",function(){

                var imageIndex = parseInt($("#imageIndex").text())+1;
                var imageTotal = $("#imageTotal").text();
                if(imageIndex>imageTotal){
                    alert("已经是最后一张了！");
                    return;
                }
                var img = $("img[data-index="+imageIndex+"]").first();
                //$("#imageContainer").html($(img).clone());
                $("#img_show_big").attr("src",$(img).attr("src"));
                $("#imageIndex").text(""+imageIndex);
            });

            $(".imgslist").click(function(){
                if(isAndroid){
//                    alert("imageIndex:"+$(this).attr("data-index")+" imageTotal:"+$("#divUrls").text().split(",").length);
                    $("#imageIndex").text($(this).attr("data-index"));
                    $("#imageTotal").text( $("#divUrls").text().split(",").length);
                    //$("#imageContainer").html($(this).clone());
                    $("#img_show_big").attr("src",$(this).attr("src"));
                    $(':mobile-pagecontainer').pagecontainer('change', '#page-previewImage',{changeHash:false,reverse:true,transition:'slidedown'});
                }else{
                    var url = $(this).attr("src");
                    var arr = $("#divUrls").text().split(",");
                    wx.previewImage({
                        current: url,
                        urls: arr
                    });
                }
            });

        });

        wx.error(function(res){
            //alert(res.errMsg);
        });

    </script>


</body>
</html>

<script>
    /**批注相关JS**/
        //详情页面
    $(function(){
        $("a[key=page-main-action]").click(function(){
            $(':mobile-pagecontainer').pagecontainer('change', '#page-main',{changeHash: false,reverse: true,transition:'slideup'});
        })
        //批注页面
        $("a#page-comment-action,a[key='page-comment-action']").off("click").on("click",function(){
            $(':mobile-pagecontainer').pagecontainer('change', '#page-comment',{changeHash: false,reverse: true,transition:'slidedown'});
            loadListview($("#comment-listview-content"),{},function(rdata){
                $("a[key=comment-popup2]").unbind('click').bind("click",function(e){
                    $( "#comment-popup2" ).data("parentId",$(this).attr("parentId")).data("createrId",$(this).attr("createrId"));
                    $( "#comment-popup2 textarea" ).attr("placeholder","@"+$(this).attr("createrName"));
                    $( "#comment-popup2" ).popup( "open", {transition:'pop',positionTo:'window'} );
                })
            })
        })
        //发表批注对话框的提交按钮
        $("#comment-popup2 button").bind("click",function(e){
            //隐藏popup
            var parentId = $( "#comment-popup2" ).data("parentId");
            var createrId = $( "#comment-popup2" ).data("createrId");
            var text = $( "#comment-popup2 textarea" ).val();

            var targetId = $("#page-comment").attr("targetId");
            var targetObject = $("#page-comment").attr("targetObject");
            //alert(parentId + " " + createrId + " " + text + " " + targetId + " " + targetObject);
            sendComment(parentId,createrId,text,targetId,targetObject,function(){

            });
        })

        $("a#proback_edit").off("click").on("click",function(){
            location.href = 'ajax-proback!input.action?keyId=<s:property value="proBack.id"/>';
        })

        $("#btn_choose").click(function(){
            $(':mobile-pagecontainer').pagecontainer('change', '#page-user',{changeHash: false,reverse: true,transition:'slideup'});
            loadListview($("#comment-user-content"),{},function(rdata){

            })
        });
        //发表批注对话框的提交按钮
        $("#chart_btn").bind("click",function(e){
            //alert(1);
            //隐藏popup
            var toUsersId = $( "#hi_ids").val();
           // var createrId = $( "#comment-popup2" ).data("createrId");
            var text = $( "#chart_user" ).val();

            var targetId = $("#page-comment").attr("targetId");
            var targetObject = $("#page-comment").attr("targetObject");
            //alert(parentId + " " + createrId + " " + text + " " + targetId + " " + targetObject);
            sendComment(null,toUsersId,text,targetId,targetObject,function(){
            });
        })
    })

    $("#page-resume-action").off("click").on("click",function(e){
        $(':mobile-pagecontainer').pagecontainer('change', '#page-resume',{changeHash: false,reverse: true,transition:'slidedown'});
        loadListview($("#comment-listview-resume"),{},function(rdata){

        })
    });
</script>

<script>
    $(function(){
        $("#comuser_btn").click(function(){
            var ids='';
            var names='';
            $("input[name='check_user']:checked").each(function(i,v){
                ids+=$(this).attr("id")+",";
                //names+="@"+$(this).attr("key")+" ";
            });
            $("#hi_ids").val(ids);
            //$("#chart_user").val(names);
            $(':mobile-pagecontainer').pagecontainer('change', '#page-comment',{changeHash: false,reverse: true,transition:'slideup'});
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if(isiOS){
                document.body.scrollTop = 90000;

            }
        });

    });

</script>
<script type="text/javascript">
$(function(){
      var u = navigator.userAgent, app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        $("#ToolBar").addClass("toolAndroid");
        if(isiOS){
            $('#chart_user').focus(function(){
                  var body = $('body').height();
                  var comment_listview = $("#comment-listview-content").height();
                  if(body>comment_listview){
                    document.body.scrollTop = body;
                  }else{
                    $("#ToolBar").removeClass().addClass("toolIos");
                    document.body.scrollTop = comment_listview;
                  }

            });
            $('#chart_user').blur(function(){
                 $("#ToolBar").removeClass().addClass("toolAndroid");
            });
        }
});

</script>



